<div class="wrap">
  <nz-page-header nzBackIcon [nzGhost]="false">
    <nz-page-header-title>
      <ng-container *ngIf="id != null">
        环境详情
      </ng-container>
      <ng-container *ngIf="id == null">
        新建环境
      </ng-container>
    </nz-page-header-title>
  </nz-page-header>
</div>
<nz-card class="mt10">
  <form nz-form [formGroup]="form" (ngSubmit)="submitForm(form.value)">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>源数据库Host</nz-form-label>
          <nz-form-control [nzErrorTip]="fromHostErrorTpl">
            <input nz-input formControlName="fromHost" placeholder="请输入源数据库Host"/>
            <ng-template #fromHostErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入源数据库Host!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>源数据库端口</nz-form-label>
          <nz-form-control [nzErrorTip]="fromPortErrorTpl">
            <input nz-input formControlName="fromPort" placeholder="请输入源数据库端口"/>
            <ng-template #fromPortErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入源数据库端口!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>源数据库用户名</nz-form-label>
          <nz-form-control [nzErrorTip]="fromUsernameErrorTpl">
            <input nz-input formControlName="fromUsername" placeholder="请输入源数据库用户名"/>
            <ng-template #fromUsernameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入源数据库用户名!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>源数据库密码</nz-form-label>
          <nz-form-control [nzErrorTip]="fromPasswordErrorTpl">
            <input nz-input formControlName="fromPassword" placeholder="请输入源数据库密码"/>
            <ng-template #fromPasswordErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入源数据库密码!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>目标数据库Host</nz-form-label>
          <nz-form-control [nzErrorTip]="toHostErrorTpl">
            <input nz-input formControlName="toHost" placeholder="请输入目标数据库Host"/>
            <ng-template #toHostErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入目标数据库Host!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>目标数据库端口</nz-form-label>
          <nz-form-control [nzErrorTip]="toPortErrorTpl">
            <input nz-input formControlName="toPort" placeholder="请输入目标数据库端口"/>
            <ng-template #toPortErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入目标数据库端口!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>目标数据库用户名</nz-form-label>
          <nz-form-control [nzErrorTip]="toUsernameErrorTpl">
            <input nz-input formControlName="toUsername" placeholder="请输入目标数据库用户名"/>
            <ng-template #toUsernameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入目标数据库用户名!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>目标数据库密码</nz-form-label>
          <nz-form-control [nzErrorTip]="toPasswordErrorTpl">
            <input nz-input formControlName="toPassword" placeholder="请输入目标数据库密码"/>
            <ng-template #toPasswordErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入目标数据库密码!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>数据库</nz-form-label>
          <nz-form-control>
            <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
              <i nz-icon nzType="plus"></i>
              添加数据库
            </button>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="6">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired>标题</nz-form-label>
          <nz-form-control [nzErrorTip]="titleErrorTpl">
            <input nz-input formControlName="title" placeholder="请输入标题"/>
            <ng-template #titleErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入标题!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="6" formArrayName="list"
           *ngFor="let control of form.controls.list?.controls; let i = index">
        <nz-form-control [formGroupName]="i">
          <input class="passenger-input" nz-input placeholder="请输入库名" formControlName="name">
          <i *ngIf="form.controls.list?.length != 1" nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="removeField(i)"></i>
        </nz-form-control>
      </div>
    </div>

    <div nz-row>
      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary" [disabled]="!form.valid">提交</button>
          <button nz-button (click)="resetForm($event)">重置</button>
        </nz-form-control>
      </nz-form-item>
    </div>

  </form>
</nz-card>
